<script setup>
import {ref} from "vue";

const tabsList = [
  { name: '关注' },
  { name: '首页' },
  { name: '发现' }
];
// 初始化默认激活的选项卡为 '首页'，即索引 1
const currentTab = ref(1);

const handleTabChange = (item)=> {
  currentTab.value = item.index;
}

</script>

<template>
  <up-navbar>
    <template #left>
      <up-icon name="list" size="24"></up-icon>
    </template>
    <template #right>
      <up-icon name="search" size="24"></up-icon>
    </template>
    <template #center>
      <up-tabs
          :list="tabsList"
          :current="currentTab"
          @change="handleTabChange"
          lineWidth="30"
          lineColor="#f56c6c"
          :activeStyle="{
      color: '#303133',
      fontWeight: 'bold',
      transform: 'scale(1.05)'
    }"
          :inactiveStyle="{
      color: '#606266',
      transform: 'scale(1)'
    }"
          itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
      >
      </up-tabs>
    </template>
  </up-navbar>
</template>

<style scoped>

</style>